<template>
	<view style="width: 400px;">
		<view class="uni-input-wrapper" style="margin:0 auto;">
			<input type="text" class="uni-input" maxlength="20" placeholder="搜索:自卑心理如何改善" />
		</view>
		<view class="swiper">
			<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
				easing-function="true" indicator-dots='true'>
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu" style="margin-top: 30px;">
			<ul>
				<li>
					<navigator url="./Exam/index">
						<image src="../../static/menuIcon/test.png" alt="" style="width: 60px;height: 60px;">
						<br>
						<span>心理测试</span>
					</navigator>
				</li>
				<li>
					<navigator url="./Steward/index">
						<image src="../../static/menuIcon/steward.png" alt="" style="width: 60px;height: 60px;">
						<br>
						<span>心理管家</span>
					</navigator>
					<!-- <img src="../../static/menuIcon/steward.png" alt="" style="width: 60px;height: 60px;">
					<br>
					<span>心理管家</span> -->
				</li>
				<li>
					<image src="../../static/menuIcon/community.png" alt="" style="width: 60px;height: 60px;">
					<br>
					<span>馨语社区</span>
				</li>
				<li>
					<navigator url="./DangerAnalysis/DangerAnalysis">
						<image src="../../static/menuIcon/dangerous.png" alt="" style="width: 60px;height: 60px;">
						<br>
						<span>风险分析</span>
					</navigator>
				</li>
				<li>
					<image src="../../static/menuIcon/consultant.png" alt="" style="width: 60px;height: 60px;">
					<br>
					<span>预约咨询</span>
				</li>
				<li>
					<image src="../../static/menuIcon/knowledge.png" alt="" style="width: 60px;height: 60px;">
					<br>
					<span>心理科普</span>
				</li>

			</ul>
		</view>
		<view class="other">
			<span>其他</span>
			<view class="relaxing">
				<image src="../../static/pic2.png" alt="" style="width: 350px;height: 100px;margin-top: 5px;">
			</view>
		</view>
		<view class="readArticle">
			<view class="words">
				<span>文章·阅读</span>
				<span style="font-size: 0.3em;float:right;margin-right: 25px; ">更多文章</span>
			</view>
			<image src="../../static/menuIcon/article.png" alt="" style="width:350px;margin-top: 5px;">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图图片
				bannerList: [
					"../../static/pic1.png",
					"../../static/pic2.png",
					"../../static/pic3.png",
					"../../static/pic4.png"
				]
			}
		},
		// mounted() {
		// 	this.test()
		// },
		// methods: {
		// 	test() {
		// 		const getToken = uni.getStorageSync('uni_id_token')
		// 		console.log('getToken',getToken)
		// 	}
		// }
	}
</script>

<style>
	.uni-input {
		font-size: 15px;
		height: 40px;
		border-radius: 4px;
		border: 1px solid #c8cccf;
		width: 300px;
		margin-top: 20px;
		margin-left: 50px;

	}

	.swiper {
		height: 150px;
		width: 360px;
		margin-top: 30px;
		margin-left: 20px;
		margin-right: 15px;
	}

	ul>li {
		list-style: none;
		display: inline-block;
		width: 100px;
		height: 100px;
		margin: 5px;
	}

	.other {
		margin-left: 25px;
	}

	.readArticle {
		margin-left: 25px;
		margin-top: 10px;
	}
</style>
